<!--基础信息管理-->
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from 'element-plus';

//控制是否可用编辑
const ifEdit=ref(false);
//开局读取
onMounted(()=>{
  getHosInfo();
  getMailInfo();
  getCopySett();
})


//医院基础信息表
const hospitalInfo=ref({
  name:'',
  phone:'',
  addr:'',
  createTime:''
})
//医院信息修改记录，最多五条
const hosHistory=ref([
  {updateUser:'张医生',updateTime:'2024-07-07 11:11:11',content:'修改',paramName:['医院电话'],text:['原值:123\n现值:456'],type:'warning'},
  {updateUser:'张医生',updateTime:'2024-07-07 11:11:11',content:'修改',paramName:['医院名称','医院电话','医院地址'],text:['原值:123 现值:456','原值:1 现值:2','原值:1 现值:2'],type:'warning'},
  {updateUser:'张医生',updateTime:'2024-07-07 11:11:11',content:'创建',paramName:'',text: '',type:'primary'},
])
//从后端获取医院信息&修改记录
const getHosInfo=()=>{
  //拿医院信息
  axios.get(getBaseURL(1)+'/v1/duplicate/basic_info/get_hos_info').then((response)=>{
    hospitalInfo.value=response.data.data;
  })
  //拿医院信息修改履历
  axios.get(getBaseURL(1)+'/v1/duplicate/basic_info/get_hos_history').then((response)=>{
    //显示处理
    let history=response.data.data;
    hisInfoTrans(history,'hos');
    //存储
    hosHistory.value = history;
  })
}
//修改医院信息
const updateHosInfo=()=>{
  let data=qs.stringify(hospitalInfo.value)
  axios.post(getBaseURL(1)+'/v1/duplicate/basic_info/update_hos_info',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('修改成功！');
      getHosInfo();
      ifEdit.value=false;
    }
    else {
      ElMessage.error(response.data.msg);
    }
  })
}
//取消修改
const resetHosInfo=()=>{
  ifEdit.value=false;
  getHosInfo();
}


//邮寄信息表
const mailInfo=ref({
  name:'',
  phone:'',
  addr:'',
  createTime:''
})
//邮寄信息修改记录，最多五条
const mailHistory=ref([
  {updateUser:'张医生',updateTime:'2024-07-07 11:11:11',content:'修改',paramName:['联系电话'],text:['原值:123\n现值:456'],type:'warning'},
  {updateUser:'张医生',updateTime:'2024-07-07 11:11:11',content:'创建',paramName:[''],text: [''],type:'primary'},
])
//从后端获取邮寄信息&修改记录
const getMailInfo=()=>{
  //拿邮寄信息
  axios.get(getBaseURL(1)+'/v1/duplicate/basic_info/get_mail_info').then((response)=>{
    mailInfo.value=response.data.data;
  })
  //拿邮寄信息修改履历
  axios.get(getBaseURL(1)+'/v1/duplicate/basic_info/get_mail_history').then((response)=>{
    //显示处理
    let history=response.data.data;
    hisInfoTrans(history,'mail');
    //存储
    mailHistory.value = history;
  })
}
//修改邮寄信息
const updateMailInfo=()=>{
  let data=qs.stringify(mailInfo.value)
  axios.post(getBaseURL(1)+'/v1/duplicate/basic_info/update_mail_info',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('修改成功！');
      getMailInfo();
      ifEdit.value=false;
    }
    else {
      ElMessage.error(response.data.msg);
    }
  })
}
//取消修改
const resetMailInfo=()=>{
  ifEdit.value=false;
  getMailInfo();
}

//复印配置表
const copySettings=ref({
  price:'',
  maxNum:'',
  info:''
})
//获取复印配置
const getCopySett=()=>{
  axios.get(getBaseURL(1)+'/v1/duplicate/basic_info/get_copy_settings').then((response)=>{
    copySettings.value=response.data.data;
  })
}
//修改复印配置
const updateCopySett=()=>{
  let data=qs.stringify(copySettings.value);
  axios.post(getBaseURL(1)+'/v1/duplicate/basic_info/update_copy_settings',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('修改成功！');
      ifEdit.value=false;
      getCopySett();
    }
    else ElMessage.error(response.data.msg);
  })
}
//取消复印配置修改
const resetCopySett=()=>{
  ifEdit.value=false;
  getCopySett();
}

//对修改履历的显示处理
const hisInfoTrans=(history,status)=>{
  for(let item=0;item<history.length;item++) {
    //处理创建格
    if(history[item].id==1){
      history[item].content='创建';
      history[item].text=[];
      switch (status){
        case 'hos':history[item].updateTime=hospitalInfo.value.createTime;break;
        case 'mail':history[item].updateTime=mailInfo.value.createTime;break;
      }
      history[item].type='primary';
      continue;
    }
    history[item].content = '修改';
    history[item].text = [];
    for (let t = 0; t < history[item].paramName.length; t++) {
      if (status == 'hos') {
        switch (history[item].paramName[t]) {
          case 'name':history[item].paramName[t] = '医院名称';break;
          case 'phone':history[item].paramName[t] = '医院电话';break;
          case 'addr':history[item].paramName[t] = '医院地址';break;
        }
      } else if (status == 'mail') {
        switch (history[item].paramName[t]) {
          case 'name':history[item].paramName[t] = '寄件人';break;
          case 'phone':history[item].paramName[t] = '联系电话';break;
          case 'addr':history[item].paramName[t] = '寄件地址';break;
        }
      }
      history[item].text[t] = "原值：" + history[item].updateBefore[t] + "；现值：" + history[item].updateAfter[t];
    }
    history[item].type = 'warning';
  }
}
</script>

<template>
  <div style="background-color:#F0F2F5;">
    <el-tabs type="card" style="width: 90%;background-color:#fff;margin: 0 auto;">
      <el-tab-pane label="基础信息管理">
        <el-container>
          <!--信息部分-->
          <el-main style="padding: 20px 50px;width: 60%;">
            <el-form label-width="100px" label-position="left" v-model="hospitalInfo">
<!--              <el-row :gutter="30" style="margin-bottom: 20px;">-->
<!--                <el-col :span="24">-->
<!--                  <el-form-item label="医院头像">-->

<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->

              <el-row :gutter="30" style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-form-item label="医院名称">
                    <el-input style="width: 400px;" :disabled="!ifEdit" v-model="hospitalInfo.name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="30" style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-form-item label="医院电话">
                    <el-input style="width: 400px;" :disabled="!ifEdit" v-model="hospitalInfo.phone"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="30" style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-form-item label="医院地址">
                    <el-input style="width: 400px;" :disabled="!ifEdit" v-model="hospitalInfo.addr"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="30" style="margin-bottom: 20px;">
                <el-col :span="4"/>
                <el-col :span="3"  v-if="ifEdit==false">
                  <el-button type="primary" @click="ifEdit=true">编辑</el-button>
                </el-col>
                <el-col :span="3" v-if="ifEdit==true">
                  <el-button type="primary" @click="updateHosInfo">保存</el-button>
                </el-col>
                <el-col :span="3" v-if="ifEdit==true">
                  <el-button @click="resetHosInfo">取消</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-main>
          <!--修改历史部分-->
          <el-aside style="width: 40%;text-align: left;padding: 20px;">
            <div style="font-size: 18px;font-weight: bold;margin-bottom: 30px;">Ta的历史</div>
            <el-timeline style="padding: 0">
              <el-row :gutter="20" style="padding:0;margin:0;">
                <el-col :span="8" style="padding-right: 0;">
                  <div v-for="item in hosHistory" style="height: 70px;color:#909399;position: relative;top: -2px">
                    {{item.updateTime}}
                  </div>
                </el-col>
                <el-col :span="16">
                  <el-timeline-item style="height: 50px;" v-for="item in hosHistory" :type="item.type" hollow>
                    {{item.updateUser}}&nbsp;&nbsp;{{item.content}}&nbsp;&nbsp;
                    <div style="position: absolute;width: 150px;display: inline-block;">
                      <el-tooltip effect="dark" :content="item.text[0]">
                        <el-text type="primary">{{item.paramName[0]}}</el-text>
                      </el-tooltip>
                      <el-tooltip effect="dark" v-if="item.text[1]!=null" :content="item.text[1]">
                        <el-text type="primary">，{{item.paramName[1]}}</el-text>
                      </el-tooltip>
                      <el-tooltip effect="dark" v-if="item.text[2]!=null" :content="item.text[2]">
                        <el-text type="primary">，{{item.paramName[2]}}</el-text>
                      </el-tooltip>
                    </div>
                  </el-timeline-item>
                </el-col>
              </el-row>
            </el-timeline>
          </el-aside>
        </el-container>
      </el-tab-pane>

      <el-tab-pane label="邮寄信息管理">
        <el-container>
          <!--信息部分-->
          <el-main style="padding: 20px 50px;width: 60%;">
            <el-form label-width="100px" label-position="left">
              <el-row :gutter="30" style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-form-item label="寄件人">
                    <el-input style="width: 400px;" :disabled="!ifEdit" v-model="mailInfo.name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="30" style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-form-item label="联系电话">
                    <el-input style="width: 400px;" :disabled="!ifEdit" v-model="mailInfo.phone"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="30" style="margin-bottom: 20px;">
                <el-col :span="24">
                  <el-form-item label="邮寄地址">
                    <el-input style="width: 400px;" :disabled="!ifEdit" v-model="mailInfo.addr"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="30" style="margin-bottom: 20px;">
                <el-col :span="4"/>
                <el-col :span="3"  v-if="ifEdit==false">
                  <el-button type="primary" @click="ifEdit=true">编辑</el-button>
                </el-col>
                <el-col :span="3" v-if="ifEdit==true">
                  <el-button type="primary" @click="updateMailInfo">保存</el-button>
                </el-col>
                <el-col :span="3" v-if="ifEdit==true">
                  <el-button @click="resetMailInfo">取消</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-main>
          <!--修改历史部分-->
          <el-aside style="width: 40%;text-align: left;padding: 20px;">
            <div style="font-size: 18px;font-weight: bold;margin-bottom: 30px;">Ta的历史</div>
            <el-timeline style="padding: 0">
              <el-row :gutter="20" style="padding:0;margin:0;">
                <el-col :span="8" style="padding-right: 0;">
                  <div v-for="item in mailHistory" style="height: 70px;color:#909399;position: relative;top: -2px;">
                    {{item.updateTime}}
                  </div>
                </el-col>
                <el-col :span="16">
                  <el-timeline-item style="height: 50px;" v-for="item in mailHistory" :type="item.type" hollow>
                    {{item.updateUser}}&nbsp;&nbsp;{{item.content}}&nbsp;&nbsp;
                    <div style="position: absolute;width: 150px;display: inline-block;">
                      <el-tooltip effect="dark" :content="item.text[0]">
                        <el-text type="primary">{{item.paramName[0]}}</el-text>
                      </el-tooltip>
                      <el-tooltip effect="dark" v-if="item.text[1]!=null" :content="item.text[1]">
                        <el-text type="primary">，{{item.paramName[1]}}</el-text>
                      </el-tooltip>
                      <el-tooltip effect="dark" v-if="item.text[2]!=null" :content="item.text[2]">
                        <el-text type="primary">，{{item.paramName[2]}}</el-text>
                      </el-tooltip>
                    </div>
                  </el-timeline-item>
                </el-col>
              </el-row>
            </el-timeline>
          </el-aside>
        </el-container>
      </el-tab-pane>

      <el-tab-pane label="复印配置管理">
        <el-form label-width="100px" label-position="left" style="padding: 20px 50px;">
          <el-row :gutter="30" style="margin-bottom: 20px;">
            <el-col :span="24">
              <el-form-item label="复印金额">
                <el-input :disabled="!ifEdit" style="width: 200px;" v-model="copySettings.price">
                  <template #append>元/张</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30" style="margin-bottom: 20px;">
            <el-col :span="24">
              <el-form-item label="最大复印份数">
                <el-input :disabled="!ifEdit" style="width: 200px;" v-model="copySettings.maxNum">
                  <template #append>份</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30" style="margin-bottom: 20px;">
            <el-col :span="24">
              <el-form-item label="复印须知">
                <el-input :disabled="!ifEdit" v-model="copySettings.info" style="width: 100%;" type="textarea" maxlength="1000" show-word-limit resize="none" rows="5"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="30" style="margin-bottom: 20px;">
            <el-col :span="2"/>
            <el-col :span="1"  v-if="ifEdit==false">
              <el-button type="primary" @click="ifEdit=true">编辑</el-button>
            </el-col>
            <el-col :span="2" v-if="ifEdit==true">
              <el-button type="primary" @click="updateCopySett">保存</el-button>
            </el-col>
            <el-col :span="1" v-if="ifEdit==true">
              <el-button @click="resetCopySett">取消</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>

</style>
